<template>
    <div class="fill_all">
        <video controls width="100%">
            <source src="/images/nong.mp4" type="video/mp4">
        </video>
        <ul class="lou">
            <li>
                <div class="je">设备名称：</div>
                <div class="content">{{ deviceName }}</div>
            </li>
            <li>
                <div class="je">设备编号：</div>
                <div class="content">camera_load_1</div>
            </li>
            <li>
                <div class="je">设备状态：</div>
                <div class="content">正常</div>
            </li>
            <li>
                <div class="je">安装时间：</div>
                <div class="content">2023-11-12</div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props: {
        deviceName: String,
    },
    data() {
        return {

        }
    },
    watch: {

    },
    methods: {

    }
}
</script>
<style scoped lang="scss">
.fill_all {
    color: #000;
    width: 100%;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
}

.lou {
    display: flex;
    flex-wrap: wrap;
    gap: 10% 4%;
    width: 100%;
    height: 20%;
    color: #fff;
    background-color: #046;
    border-radius: 10px;
    margin: 0;
    margin-top: 20px;
    padding: 10px;
    box-sizing: border-box;

    li {
        display: flex;
        align-items: center;
        list-style: none;
        width: 48%;
        height: 45%;
        background-color: #01324a;
        border-radius: 5px;
        border-radius: 5px;
        padding: 0 10px;
        box-sizing: border-box;
    }
}

.je {
    width: 80px;
}

.content {
    flex: 1;
}
</style>
